<template>
  <div class="input-scan">
    <input v-model="model" class="text" :style="style" />
    <input v-model="model" class="pass" :style="style" id="input-scan-pass" ref="passRef" @keyup.enter="onKeyUpEnter"
      type="password" :name="randomName" autocomplete="off" />
  </div>
</template>
<script lang="ts" setup>
// 扫码输入框, 屏蔽中文输入法 autocomplete="new-password"  autocomplete="off":防止浏览器保存密码
// 用法: 使用时不要绑定mmodel,仅通过onEnter获取扫码(回车)结果
// <MkScan placeholder="请扫描标本条码" @onEnter="getBarcode" /> 
defineOptions({
  name: 'MkScan'
})

const props = defineProps({
  style: {
    type: String,
    default: () => '',
  },
})
const emit = defineEmits(['onEnter']) // 监听回车事件
const model = defineModel({ default: ' ' }) // 放一个空格, 防止浏览器自动填充

const passRef = ref()
const randomName = ref('password_')

onMounted(() => {
  // 随机生成name, 防止浏览器自动填充(不是所有浏览器都有效)
  randomName.value = 'password_' + Math.random().toString(36).substring(2, 15)
})

const onKeyUpEnter = () => {
  emit('onEnter', model.value.trim())
  passRef.value.select()
}

</script>

<style scoped>
.input-scan {
  position: relative;
  height: 39px;
  width: 290px;
  margin: 10px;
}

.text,
.pass {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 等宽字体 */
  font-family: 'Consolas', Courier, monospace;
  font-size: large;
  border-radius: 4px;
  padding: 8px;
}

.text {
  z-index: 1;
  border: 1px solid lightgray;
}

.pass {
  z-index: 2;
  border: 0px solid red;

  background-color: transparent;
  caret-color: black;
  color: transparent;
}

/* 选中后字体透明,蓝色背景50%透明 */
#input-scan-pass::selection {
  color: transparent;
  background-color: rgba(0, 0, 255, 0.5);
}

#input-scan-pass::-moz-selection {
  color: transparent;
  background-color: rgba(0, 0, 255, 0.5);
}
</style>
